<template>
  <div>
    <zck-header></zck-header>
    <!-- 2楼轮播图 -->
    <div class="slid">
      <div class="slid-1">
        <img src="../assets/image/LB-1.jpg" />
        <!-- <img :src="pic" alt="" /> -->
      </div>
    </div>
    <!-- 3楼地图区域 -->
    <div class="paragraph">
      <div class="paragraph-center">
        <div class="paragraph-left">
          <h3>关于中科东方</h3>
          <h1>让细胞科技造福社会</h1>
          <div class="p2">
            <p>
              中科东方细胞科技有限公司(简称中科东方)成立于2020年,是一家集生物技术研发、细胞新药研发、医学转化、健康管理与医学美容为一体的高科技创新生物企业。
            </p>
            <p>
              中科东方依托中国科学院的科研技术力量，以中科院资深科学家为核心，与多家高校、研究所、医院及企业的科学家及专家团队建立了合作关系。通过前期技术攻关，中科东方已掌握一批核心技术知识产权专利并形成产品，如干细胞培养所需无血清培养基，解决了行业技术难点痛点，目前多条研发管线处于快速推进并启动临床研究管线。
              中科东方全体员工奉行“卓越创新、开拓进取、敬业担当、感恩厚德”的价值观，以“让细胞科技造福社会”为使命，致力于“成为细胞科技领域卓有成就、对社会贡献巨大、对人类健康有价值”的企业。未来，中科东方将持续打造具有国际影响力的再生医学创新转化平台，让科技创新为人类健康服务。
            </p>
          </div>
          <button>查看更多</button>
        </div>
        <div class="paragraph-right">
          <img src="../assets/image/map-1.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 四楼生命银行 -->
    <div class="bank">
      <div class="bank-1">
        <h1>生命银行</h1>
      </div>
    </div>
    <!-- 五楼 四个卡片 -->
    <div class="card">
      <div class="card-1">
        <div class="card-1-top">
          <span>MORE+</span>
          <img src="../assets/image/card-1.png" alt="" />
          <h3>围产期干细胞存储</h3>
          <p>
            围产期干细胞是通过围产期胎盘、脐带等组织采集的间充质干细胞的统称，这类型细胞干细胞在修复损伤或病变的组织器官、免疫调节及促进造血功能恢复等方面具有广阔的临床应用前景。
          </p>
        </div>
      </div>
      <div class="card-2">
        <div class="card-2-top">
          <span>MORE+</span>
          <img src="../assets/image/card-2.png" alt="" />
          <h3>免疫细胞储存</h3>
          <p>
            免疫细胞指参与免疫应答或与免疫应答相关的细胞。包括淋巴细胞、树突状细胞、单核/巨噬细胞、粒细胞、肥大细胞等,可分为特异性和非特异性免疫细胞。
          </p>
        </div>
      </div>
      <div class="card-3">
        <div class="card-3-top">
          <span>MORE+</span>
          <img src="../assets/image/card-3.png" alt="" />
          <h3>成体干细胞储存</h3>
          <p>
            根据个体发育过程中出现的先后次序不同，干细胞可分为胚胎干细胞和成体干细胞。在成体（包括胎儿、婴幼儿、儿童和成人）各种组织中存在多潜能干细胞统称“成体干细胞”。
          </p>
        </div>
      </div>
      <div class="card-4">
        <div class="card-4-top">
          <span>MORE+</span>
          <img src="../assets/image/card-4.png" alt="" />
          <h3>成纤维细胞存储</h3>
          <p>
            皮肤成纤维细胞是构成皮肤真皮层的主要细胞类型，是疏松结缔组织的主要细胞成分，细胞呈梭形或扁的星状，具有突起。可以合成胶原蛋白、弹性蛋白和细胞外基质，构成皮肤组织的结构框
          </p>
        </div>
      </div>
    </div>
    <!-- 六楼 科研服务板块 -->
    <div class="lb">
      <div class="lb-1">
        <img src="../assets/image/GG-1.jpg" />
      </div>
      <div class="lb-2">
        <div class="lb-2-2">
          <h1>科研服务</h1>
          <h3>全面满足科研、代理商或者个人的各种科研检测需求</h3>
          <p>
            中科东方具备扎实的细胞科研技术及研发服务平台，包括间充质干细胞、免疫细胞和成纤维细胞等制备和技术，根据不同客户需求，可以提供从相应的技术指导，技术平台支持到结果分析评估的科研服务整体解决方案。全面满足科研、代理商或者个人的各种科研检测需求。
          </p>
          <div class="btn-box">
            <a href="javascript:;"
              ><img src="../assets/image/prev.png" alt=""
            /></a>
            <a href="javascript:;"
              ><img src="../assets/image/next.png" alt=""
            /></a>
          </div>
        </div>
      </div>
    </div>
    <!-- 七楼 新闻中心板块 -->
    <div class="news">
      <div class="news-one">
        <div class="news-nw">
          <h1>新闻中心</h1>
        </div>
        <div class="news-lieb">
          <ul>
            <li>公司动态</li>
            <li>行业政策</li>
            <li>行业前沿</li>
            <li>社会责任</li>
          </ul>
        </div>
      </div>
      <div class="news-two">
        <div class="news-card">
          <img src="../assets/image/news-1.jpg" alt="" />
          <div class="card-text">
            <span>2021-07-21</span>
            <div class="text">喜讯｜中科东方细胞科技有限公司获评</div>
            <p>中科东方细胞科技有限公司获评2022年第四批国家科技型中小企业</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 八楼 在线咨询模块 -->
    <div class="seek">
      <div class="seek-1">
        <img src="../assets/image/index5bg.jpg" alt="" />
        <div class="seek-ipt">
          <h1>在线咨询</h1>
          <ul>
            <li>国产期干细胞</li>
            <li>成体干细胞</li>
            <li>免疫细胞</li>
            <li>成纤维细胞</li>
          </ul>
          <div class="seek-box-box">
            <div class="seek-box1">
              <div class="box-title1">姓名</div>
              <input type="text" placeholder="请输入您的姓名" />
            </div>
            <div class="seek-box2">
              <div class="box-title2">性别</div>
              <div class="box-ipt">
                <input type="radio" />&nbsp;&nbsp;男 &nbsp;&nbsp;&nbsp;<input
                  type="radio"
                />&nbsp;&nbsp;女
              </div>
            </div>
            <div class="seek-box3">
              <div class="box-title3">年龄</div>
              <input type="text" placeholder="请输入您的年龄" />
            </div>
            <div class="seek-box4">
              <div class="box-title4">联系电话</div>
              <input type="text" placeholder="请输入您的联系方式" />
            </div>
            <div class="seek-box5">
              <div class="box-title5">问题描述</div>
              <textarea
                cols="55"
                rows="6"
                placeholder="请输入您的问题"
              ></textarea>
            </div>
          </div>
          <button>提交</button>
        </div>
        <div class="seek-foot"></div>
      </div>
    </div>

    <zck-footer></zck-footer>
  </div>
</template>

<script>
// 轮播图
import myaxios from "@/http/MyAxios";
export default {
  data() {
    return {
      pic: {},
    };
  },
  mounted() {
    let url = "http://127.0.0.1:3000/v1/index/slide";
    myaxios.get(url).then((res) => {
      console.log(res);
      this.pic = res.data.data;
      console.log(this.pic[0].pic);
    });
  },
};
</script>

<style lang="scss" scoped>
/* 二楼轮播图css区域 */
.slid .slid-1 img {
  width: 100%;
}
.reco-botm .botm-u ul li a {
  color: #000;
}

/* 三楼段落区域 */
.paragraph {
  height: 862px;
}
.paragraph .paragraph-center {
  /* width: 1200px; */
  background-color: red;
  margin-top: 90px;
  margin-bottom: 90px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  position: relative;
}
.paragraph .paragraph-left {
  width: 600px;
  position: absolute;
  left: 95px;
  margin-top: 111px;
}
.paragraph .paragraph-left h3 {
  font-size: 26px;
  margin-bottom: 26px;
  color: #333;
}
.paragraph .paragraph-left h1 {
  font-size: 36px;
  color: #258bc9;
  font-weight: 700;
}
.paragraph .paragraph-left p {
  font-size: 16px;
  margin-top: 36px;
  width: 501px;
  color: #666;
}
.paragraph .paragraph-left .p2 {
  margin: 55px auto 48px;
  line-height: 26px;
}
.paragraph .paragraph-left button {
  margin: 0 auto;
  width: 168px;
  height: 56px;
  line-height: 56px;
  text-align: center;
  background: #fff;
  font-size: 16px;
  border-radius: 30px;
  border: none;
  background-image: linear-gradient(90deg, #258bc9 0%, #56bced 100%),
    linear-gradient(#109cda, #109cda);
  color: #fff;
  background-blend-mode: normal, normal;
}
.paragraph .paragraph-right {
  width: 600px;
  position: absolute;
  left: 715px;
  margin-top: 111px;
}
.paragraph .paragraph-right img {
  position: absolute;
  /* left: -50px; */
  transform: scale(0.8);
  z-index: -1;
}

/* 四楼 生命银行 */
.bank {
  background-color: rgba(195, 209, 222, 0.2);
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.bank .bank-1 h1 {
  font-size: 32px;
  font-weight: 700;
}

/* 五楼卡片 */
.card {
  height: 580px;
  display: flex;
  justify-content: space-between;
}
.card .card-1 {
  width: 393px;
  height: 580px;
  margin: 0 auto;
}
.card .card-1:hover {
  background-image: linear-gradient(90deg, #258bc9 0%, #56bced 100%),
    linear-gradient(#109cda, #109cda);
  background-blend-mode: normal, normal;
}
.card .card-2:hover {
  background-image: linear-gradient(90deg, #258bc9 0%, #56bced 100%),
    linear-gradient(#109cda, #109cda);
  background-blend-mode: normal, normal;
}
.card .card-3:hover {
  background-image: linear-gradient(90deg, #258bc9 0%, #56bced 100%),
    linear-gradient(#109cda, #109cda);
  background-blend-mode: normal, normal;
}
.card .card-4:hover {
  background-image: linear-gradient(90deg, #258bc9 0%, #56bced 100%),
    linear-gradient(#109cda, #109cda);
  background-blend-mode: normal, normal;
}
.card .card-1 .card-1-top {
  position: relative;
}
.card .card-1 .card-1-top span {
  position: absolute;
  right: 0;
  top: 0;
  color: #666;
  padding-right: 32px;
  line-height: 32px;
  height: 32px;
  background: url(../assets/image/on.png) no-repeat right top;
}
.card .card-1 .card-1-top img {
  position: absolute;
  left: 142px;
  top: 79px;
}
.card .card-1 .card-1-top h3 {
  font-size: 22px;
  font-weight: 700;
  color: #333;
  position: absolute;
  top: 248px;
  left: 101px;
}
.card .card-1 .card-1-top p {
  height: 150px;
  font-size: 16px;
  color: #666;
  line-height: 40px;
  position: absolute;
  top: 323px;
  left: 52px;
  width: 286px;
}
.card .card-2 {
  width: 393px;
  height: 580px;
  margin: 0 auto;
}
.card .card-2 .card-2-top {
  position: relative;
}
.card .card-2 .card-2-top span {
  position: absolute;
  right: 0;
  top: 0;
  color: #666;
  padding-right: 32px;
  line-height: 32px;
  height: 32px;
  background: url(../assets/image/on.png) no-repeat right top;
}
.card .card-2 .card-2-top img {
  position: absolute;
  left: 142px;
  top: 79px;
}
.card .card-2 .card-2-top h3 {
  font-size: 22px;
  font-weight: 700;
  color: #333;
  position: absolute;
  top: 248px;
  left: 101px;
}
.card .card-2 .card-2-top p {
  height: 150px;
  font-size: 16px;
  color: #666;
  line-height: 40px;
  position: absolute;
  top: 323px;
  left: 52px;
  width: 286px;
}
.card .card-3 {
  width: 393px;
  height: 580px;
  margin: 0 auto;
}
.card .card-3 .card-3-top {
  position: relative;
}
.card .card-3 .card-3-top span {
  position: absolute;
  right: 0;
  top: 0;
  color: #666;
  padding-right: 32px;
  line-height: 32px;
  height: 32px;
  background: url(../assets/image/on.png) no-repeat right top;
}
.card .card-3 .card-3-top img {
  position: absolute;
  left: 142px;
  top: 79px;
}
.card .card-3 .card-3-top h3 {
  font-size: 22px;
  font-weight: 700;
  color: #333;
  position: absolute;
  top: 248px;
  left: 101px;
}
.card .card-3 .card-3-top p {
  height: 150px;
  font-size: 16px;
  color: #666;
  line-height: 40px;
  position: absolute;
  top: 323px;
  left: 52px;
  width: 286px;
}
.card .card-4 {
  width: 393px;
  height: 580px;
  margin: 0 auto;
}
.card .card-4 .card-4-top {
  position: relative;
}
.card .card-4 .card-4-top span {
  position: absolute;
  right: 0;
  top: 0;
  color: #666;
  padding-right: 32px;
  line-height: 32px;
  height: 32px;
  background: url(../assets/image/on.png) no-repeat right top;
}
.card .card-4 .card-4-top img {
  position: absolute;
  left: 142px;
  top: 79px;
}
.card .card-4 .card-4-top h3 {
  font-size: 22px;
  font-weight: 700;
  color: #333;
  position: absolute;
  top: 248px;
  left: 101px;
}
.card .card-4 .card-4-top p {
  height: 150px;
  font-size: 16px;
  color: #666;
  line-height: 40px;
  position: absolute;
  top: 323px;
  left: 52px;
  width: 286px;
}
/* .btn-box a img:hover{
    background: #f8b62b;
}  */
/* 六楼 轮播图 */
.lb {
  background-color: rgb(248, 252, 253);
  height: 887px;
}
.lb .lb-1 img {
  width: 100%;
}
.lb {
  position: relative;
}
.lb .lb-2 {
  position: absolute;
  background-color: #fff;
  width: 773px;
  height: 600px;
  right: 0;
  top: 100px;
}
.lb .lb-2 .lb-2-2 {
  padding: 94px 204px 185px 92px;
}
.lb .lb-2 .lb-2-2 h1 {
  font-size: 34px;
  height: 36px;
  line-height: 36px;
  margin-bottom: 24px;
}
.lb .lb-2 .lb-2-2 h3 {
  color: #258bc9;
  height: 36px;
  margin-bottom: 22px;
  line-height: 36px;
  transition: 0.5s 0.7s;
  font-size: 24px;
}
.lb .lb-2 .lb-2-2 p {
  font-size: 16px;
  color: #666;
  line-height: 36px;
  text-align: justify;
  transition: 0.5s 0.9s;
  margin-top: 59px;
}
.lb .lb-2 .lb-2-2 .btn-box {
  margin-top: 45px;
}
.lb .lb-2 .lb-2-2 .btn-box a:nth-child(1) {
  padding-right: 24px;
}
/* 七楼 新闻中心板块 */
.news {
  background-color: rgb(248, 252, 253);
  height: 684px;
}
.news .news-one {
  width: 1364px;
  display: flex;
  justify-content: space-between;
  height: 42px;
  margin: 0 auto;
  margin-bottom: 48px;
}
.news .news-lieb {
  width: 396px;
}
.news .news-lieb ul {
  display: flex;
  justify-content: space-between;
  color: #333;
}
.news .news-lieb ul li {
  padding-bottom: 14px;
  font-size: 16px;
  line-height: 30px;
}
.news .news-lieb ul li:nth-child(1) {
  color: #258bc9;
  border-bottom: 1px solid #258bc9;
}
.news .news-two {
  width: 419px;
  height: 522px;
  margin-left: 108px;
}
.news .news-two img {
  width: 100%;
}
.news .news-two .news-card {
  background-color: #fff;
}
.news .news-two .news-card .card-text {
  padding: 36px 32px 40px;
}
.news .news-two .news-card .card-text .text {
  margin-bottom: 28px;
  margin-top: 29px;
  font-size: 18px;
}
.news .news-two .news-card span {
  font-size: 18px;
  line-height: 24px;
  color: #f8b62b;
}
/*  八楼 在线咨询模块 */
.seek .seek-1 {
  position: relative;
}
.seek .seek-1 img {
  width: 100%;
  height: 807px;
}
.seek-ipt {
  width: 1000px;
  height: 607px;
  margin: 0 auto;
  position: absolute;
  top: 98px;
  left: 0;
  right: 0;
  bottom: 0;
}
.seek-ipt h1 {
  text-align: center;
}
.seek-ipt ul {
  display: flex;
  width: 674px;
  margin: 52px auto;
  margin-bottom: 14px;
}
.seek-ipt ul li {
  color: #fff;
  font-size: 20px;
  margin-bottom: 20px;
  margin-right: 60px;
  line-height: 30px;
  height: 30px;
}
.seek-box1 {
  background-color: rgba(255, 255, 255, 0.1);
  height: 56px;
  width: 674px;
  display: flex;
  border-top-left-radius: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.box-title1 {
  width: 193px;
  margin-right: 1px;
  text-align: center;
  font-size: 16px;
  color: #fff;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  height: 56px;
  line-height: 56px;
}
.seek-box1 input {
  color: #fff;
  width: 480px;
  background: none;
  padding-left: 46px;
  padding-right: 46px;
  outline: none;
  border-top-right-radius: 10px;
  border: none;
}
.seek-box2 {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.box-title2 {
  width: 193px;
  margin-right: 1px;
  text-align: center;
  font-size: 16px;
  color: #fff;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  height: 56px;
  line-height: 56px;
}
.seek-box2 .box-ipt {
  color: #fff;
  width: 480px;
  background: none;
  padding-left: 46px;
  padding-right: 46px;
  outline: none;
  line-height: 56px;
}

.seek-box3 {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.box-title3 {
  width: 193px;
  margin-right: 1px;
  text-align: center;
  font-size: 16px;
  color: #fff;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  height: 56px;
  line-height: 56px;
}
.seek-box3 input {
  color: #fff;
  width: 480px;
  background: none;
  padding-left: 46px;
  padding-right: 46px;
  border: none;
  outline: none;
}
.seek-box2 {
  background-color: rgba(255, 255, 255, 0.1);
  height: 56px;
  width: 674px;
  display: flex;
}
.seek-box3 {
  background-color: rgba(255, 255, 255, 0.1);
  height: 56px;
  width: 674px;
  display: flex;
}
.seek-box4 {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.box-title4 {
  width: 193px;
  margin-right: 1px;
  text-align: center;
  font-size: 16px;
  color: #fff;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  height: 56px;
  line-height: 56px;
}
.seek-box4 input {
  color: #fff;
  width: 480px;
  background: none;
  padding-left: 46px;
  padding-right: 46px;
  border: none;
  outline: none;
}
.seek-box4 {
  background-color: rgba(255, 255, 255, 0.1);
  height: 56px;
  width: 674px;
  display: flex;
}
.seek-box5 {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.seek-box5 {
  background-color: rgba(255, 255, 255, 0.1);
  height: 117px;
  width: 674px;
  display: flex;
  border-bottom-left-radius: 10px;
}
.box-title5 {
  width: 193px;
  margin-right: 1px;
  text-align: center;
  font-size: 16px;
  color: #fff;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  height: 56px;
  line-height: 56px;
}
.seek-box5 textarea {
  color: #fff;
  width: 480px;
  background: none;
  padding-left: 46px;
  padding-right: 46px;
  border-bottom-right-radius: 10px;
  border: none;
  resize: none;
  height: 116px;
  line-height: 60px;
  outline: none;
}
.seek-box-box {
  margin-left: 150px;
}
.seek-ipt button {
  outline: none;
  width: 168px;
  height: 56px;
  border-radius: 30px;
  margin: 48px auto;
  display: block;
  background: #fff;
  line-height: 56px;
  color: #258bc9;
  border: none;
}
.seek-ipt button:hover {
  color: #fff;
  background-color: #f8b62b;
}
.seek-foot {
  width: 100%;
  display: block;
  background-image: linear-gradient(
      90deg,
      #f2a440,
      #79a492 30%,
      #00a3e4 60%,
      #258bc9 100%
    ),
    linear-gradient(90deg, #f8b62b 0%, #1498d8 100%);
  background-blend-mode: normal, normal;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 6px;
}
</style>